<template>
	<view class="block">
					<view class="title" @click="showPicker = true">
						居住地
					</view>
          <u-picker :show="showPicker" :columns="columns" :mode="3" keyName="label"></u-picker>
					<!-- <view class="muster">
						<picker class="pickerList" mode="multiSelector"
              :show="showPicker"
              :range="newProvinceDataList"
              range-key="label"
              :value="multiIndex" 
              @change="pickerChange" 
              @columnchange="pickerColumnchange">
						</picker>
					</view> -->
          
							<!-- <view class="select-city">
								<view class="input" v-if="select !== ''" @click="showPicker = true">{{select}}</view>
								<view v-else class="placeholder-input" @click="showPicker = true">请输入居住地</view>
								<text class="iconfont icon-xiangyou"></text>
							</view> -->
				</view>
</template>
<script>
import {regionData} from 'element-china-area-data'
export default{
		data(){
			return{
        defaultIndex:['51','5101','510104'],
        showPicker:false,
				oldpProvinceDataList: regionData,
				newProvinceDataList:[[],[],[]],
				multiIndex: [0, 0, 0],
				select:'',
				addressData:{
					name:'',
					phone:'',
					address:''
				},
				binhao:'1',
				live_in_area1: 0,
				live_in_area2: 0,
				live_in_area3: 0,
				live_in_area1_name: '',
				live_in_area2_name: '',
				live_in_area3_name: '',
			}
		},
		onLoad:function(option){
      this.columns = regionData
      console.log(regionData,this.columns);
      
			for(let i=0; i<this.oldpProvinceDataList.length; i++){
				this.newProvinceDataList[0].push(this.oldpProvinceDataList[i]);
			}
			for(let i=0; i<this.oldpProvinceDataList[0].children.length; i++){
				this.newProvinceDataList[1].push(this.oldpProvinceDataList[0].children[i]);
			}
			for(let i=0; i<this.oldpProvinceDataList[0].children[0].children.length; i++){
				this.newProvinceDataList[2].push(this.oldpProvinceDataList[0].children[0].children[i]);
			}
		},
		methods:{
			// 省市区确认事件
			pickerChange(e){
				this.multiIndex = e.detail.value;
				this.select = `${this.newProvinceDataList[0][this.multiIndex[0]].label}
								-${this.newProvinceDataList[1][this.multiIndex[1]].label}
								-${this.newProvinceDataList[2][this.multiIndex[2]].label}`
				this.live_in_area1 = this.newProvinceDataList[0][this.multiIndex[0]].value
				this.live_in_area2 = this.newProvinceDataList[1][this.multiIndex[1]].value
				this.live_in_area3 = this.newProvinceDataList[2][this.multiIndex[2]].value
				this.live_in_area1_name = this.newProvinceDataList[0][this.multiIndex[0]].label
				this.live_in_area2_name = this.newProvinceDataList[1][this.multiIndex[1]].label
				this.live_in_area3_name = this.newProvinceDataList[2][this.multiIndex[2]].label
			},
			pickerColumnchange(e){
				// 第一列滑动
				if(e.detail.column === 0){
					this.multiIndex[0] =  e.detail.value
					this.newProvinceDataList[1] = this.oldpProvinceDataList[this.multiIndex[0]].children.map((item,index)=>{
						return item
					})
					if(this.oldpProvinceDataList[this.multiIndex[0]].children.length === 1){
						this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].children[0].children.map((item,index)=>{
							return item
						})
					}else{
						this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].children[this.multiIndex[1]].children.map((item,index)=>{
							return item
						})
					}
					// 第一列滑动  第二列 和第三列 都变为第一个
					this.multiIndex.splice(1, 1, 0)
					this.multiIndex.splice(2, 1, 0)
				}
				// 第二列滑动
				if(e.detail.column === 1){
					this.multiIndex[1] =  e.detail.value
					this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].children[this.multiIndex[1]].children.map((item,index)=>{
						return item
					})
					// 第二列 滑动 第三列 变成第一个
					this.multiIndex.splice(2, 1, 0)
				}
				// 第三列滑动
				if(e.detail.column === 2){
					this.multiIndex[2] =  e.detail.value
				}
			},
		}
	}
</script>
